<template>
    <div class="rs-tree-edit"
        @click.stop="togglePopup"
        v-clickoutside="handleClose"
        @blur="handleBlur">
        <el-input
            ref="input"
            v-model="selectedLabel"
            :size="size"
            readonly
            :placeholder="placeholder"
            @focus="handleFocus"
            @blur="softFocus = false"
            :validate-event="false"
            :class="{ 'is-focus': visible }"
            @mouseenter.native="inputHovering = true"
            @mouseleave.native="inputHovering = false">
            <template slot="suffix">
                <i v-show="!showClose" :class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"></i>
                <i v-if="showClose" class="el-select__caret el-input__icon el-icon-circle-close" @click="handleClearClick"></i>
            </template>
        </el-input>
        <RsTreeEditDropDown 
            ref="tree"
            v-model="visible" 
            placement="bottom-start"
            :append-to-body="true"></RsTreeEditDropDown>
        
    </div>
</template>
<script>
import Clickoutside from 'element-ui/lib/utils/clickoutside';
import RsTreeEditDropDown from './RsTreeEditDropDown'
export default {
    name:'RsTreeEdit',
    directives: { Clickoutside },
    components: {RsTreeEditDropDown},
    props:{
        size:{
            type:String,
            default:''
        },
        clearable:{
            type:Boolean,
            default:false
        },
        readonly:{
            type:Boolean,
            default:false
        },
        placeholder:{
            type:String,
            default:"请选择"
        },
        items:{
            default:function(){
                return []
            }
        },
        defaultProps:{
            type:Object,
            default:function(){
                return {}
            }
        },
        width:{
            type:Number,
            default:400
        },
        height:{
            type:Number,
            default:300
        },
        nodeKey:{
            type:String,
            default:''
        },
        expandKeys:{
            type:Array,
            default(){
                return []
            }
        },
        value:{
            type:String,
            default:''
        }
    },
    data(){
        return{
            visible:false,
            selectedLabel:'',
            selectedValue:'',
            softFocus:true,
            inputHovering:false
        }
    },
    watch:{
        value(newValue,oldValue){

            if( this.selectedValue != newValue ){
                const newNode = this.$refs.tree.resetSelectedNode();
                if( !newNode ){
                    this.selectedLabel = "";
                }else{
                    
                    const labelNm = this.defaultProps.label;
                    this.selectedLabel = newNode.data[labelNm];
                }
                this.selectedValue = newValue;
                this.$emit('input',newValue);
                this.$emit('change',{value:this.selectedValue,label:this.selectedLabel});
            }
        },
        items(){
            this.$refs.tree.resetSelectedNode();
        }
    },
    computed:{
        iconClass(){
            return this.visible?'arrow-up is-reverse' : 'arrow-up'
        },
        showClose(){
            let hasValue = this.value !== undefined && this.value !== null && this.value !== '';
            let criteria = this.clearable && this.inputHovering && hasValue;
            return criteria;
        }
    },
    methods:{
        handleFocus(){

        },
        handleClearClick(){

            event.stopPropagation();
            this.selectedLabel = "";
            this.$emit('input',"");
        },
        togglePopup(){

            if( !this.readonly ){
                this.visible = !this.visible;
            }
        },
        handleClose(){
            this.visible = false;
        },
        handleItemClick(data){

            this.selectedLabel = data[this.defaultProps.label];
            let selectedKey = data[this.nodeKey] || this.selectedLabel;
            this.visible = false;
            this.$refs.input.focus();
            if( this.selectedValue != selectedKey ){

                this.selectedValue = selectedKey;
                this.$emit('input',selectedKey);
                this.$emit('change',{value:this.selectedValue,label:this.selectedLabel});
            }            
        },
        handleBlur(){
            console.log(arguments)
        }
    }
}
</script>